let query = {
  tagname:'',
  page:1,
  limit:10,
 
}

layui.use(['laydate','table'],function(){
  var layer = layui.layer;
  var laydate = layui.laydate;
  var form = layui.form;
  var $ = layui.$;
  var table = layui.table;
  var laypage = layui.laypage;

 
    // 渲染
    function rendertag(){
      axios.get('ydd_tag/list',{params:query})
    .then(({data:{data}})=> {
      // console.log(data)
      renderPage(data.count)
      const newdata = data.data.map((item,index)=>{
        return  {id: item.id, tagname: item.tagname,  default_data: item.default_data,index:index+1}
      })
        //表格渲染
      table.render({
        elem: '#table-lj',
       data:newdata, // 此处为静态模拟数据，实际使用时需换成真实接口
        defaultToolbar: '',
        toolbar: '#toolBarDemo1',
        cols: [function(){
          var arr = [
            {field:'index', title:'#',},
            {field:'id', title:'ID',},
            {field:'tagname', title:'标签名称', },
            { title:'操作',toolbar: `#toolBarDemo2`, } ,
          ];
          
          // 初始化筛选状态
          var local = layui.data('table-filter-test'); // 获取对应的本地记录
          layui.each(arr, function(index, item){
            if(item.field in local){
              item.hide = local[item.field];
            }
          });
          return arr;
        }() ],  
        done: function(){
          // 记录筛选状态
          var that = this;
          that.elem.next().on('mousedown', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]+', function(){
            var input = $(this).prev()[0];
            // 此处表名可任意定义
            layui.data('table-filter-test', {
              key: input.name
              ,value: input.checked
            })
          });
        }
        
      });
    
      $('.layui-table-box').on('click','#delbtn',function(){
        axios.get('ydd_tag/del',{params:{id:$(this).attr('data-id')}})
        .then((res) => {
          // console.log(res.data);
          if(res.data.errno===1000){
            layer.msg(res.data.errmsg)
            return
          }
          $(this).parents('tr').remove()
          layer.msg('删除成功')
          rendertag()
        })
    
       
        })
        //编辑
      $('.layui-table-box').on('click','#editbtn',function(){
        const id = $(this).attr('data-id')
            openList(id)
       
      })
      //新增
      function openList(type) {
        layer.open({
        type: 1,
        area: '850px',
        resize: false,
        shadeClose: true,
        title: type === 'add' ? '添加标签' : '修改标签',
        content:
         `<form class="layui-form" lay-filter="filter-test-layer" id="addOrEdit" lay-filter="addOrEdit">
         <div class="layui-form-item">
          <label class="layui-form-label" lay-verify><i>*</i>标签名称</label>
          <div class="layui-input-block">
          <input type="text" name="tagname" lay-verify="required" placeholder="请输入标签名称" autocomplete="off" class="layui-input">
          </div>
         </div>
         
         </form>`,
        btn: ['确认', '取消'],
        btn1: async function (index) {
      if($('[name="tagname"]').val()!==''){
       const form = layui.form
       let data = form.val('filter-test-layer');

       // console.log(data);
       let url = type==='add'?'ydd_tag/add':'ydd_tag/update'
          data = type==='add'?data:{...data,id:type} 
     const res = await axios.post(url,data)
      //  console.log(res);
       rendertag()
      }else{
      return layer.msg('请填写完整信息')
      }
         layer.close(index)
        },
        anim: 5
        })
       }
      $('#addItem').on('click',function(){
        openList('add')
      
      })
        let flag = true;
          $('#formChange').on('click',function(){
          if(flag){
            $('#form-lj').hide();
            $('#formChange i').css('transform', 'rotate(180deg)')
            flag = false;
          }else{
            $('#form-lj').show();
            $('#formChange i').css('transform', 'rotate(0deg)')
            flag = true;
          }
          })
          $('#refresh').on('click',function(){
               location.reload()
            // table.reload('table-lj', {
            //   where: { // 传递数据异步请求时携带的字段
            //    data: data.data
            //   }
              
            // })
          }) 
    
    })
    }
    rendertag()
function renderPage(count){
  laypage.render({
    elem: 'page-box',
    theme: '#1E9FFF',
    count,
    limits:[10,20,40,50,100],
    curr:query.page,
    limit:query.limit,
    groups:5,
    prev:'<i class="fa fa-angle-left"></i>',
    next:'<i class="fa fa-angle-right"></i>',
    layout:['count','limit','prev', 'page', 'next','skip'],
    jump: function(obj, first){
      //obj包含了当前分页的所有参数，比如：
     // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
      //console.log(obj.limit); //得到每页显示的条数
      query.page=obj.curr
        query.limit=obj.limit
      //首次不执行
      if(!first){
        //do something
        rendertag()
      }
    }
  });
}


//搜索

$('#search').on('click',function(e){
  e.preventDefault()
 
query.tagname= $('[name="title"]').val()
rendertag()

  })
  //重置
  $('#reset').on('click',function(){
    location.reload()
})



});

